<template>
  <div id="DiagnosticReport">
    <!--工单信息-->
    <div class="gdInfo">
      <van-form validate-first label-width="9em">
        <van-field label="申请人姓名：" :value="eolInfoData.applicantRealName" readonly/>
        <van-field label="工单号：" :value="eolInfoData.orderNumber" readonly/>
        <van-field label="发动机号：" :value="eolInfoData.engineNo" readonly/>
        <van-field label="机型：" :value="eolInfoData.model" readonly/>
        <van-field label="机型变型：" :value="eolInfoData.modelVar" readonly/>
        <van-field label="整车铭牌：">
          <template #input>
            <!--https://img.yzcdn.cn/vant/cat.jpeg-->
            <van-image :src="eolInfoData.vehicleImg" width="6em"
                       fit="contain"
                       height="6em"/>
          </template>
        </van-field>
        <van-field label="发动机铭牌：" name="">
          <template #input>
            <van-image :src="eolInfoData.engineImg" width="6em"
                       fit="contain"
                       height="6em"/>
          </template>
        </van-field>
        <van-field label="申请原因：" :value="eolInfoData.remark" readonly/>
        <!--审批结果-->
        <van-field
            readonly
            clickable
            name="picker"
            required
            :value="eolInfoData.approvalStatus==0?'待审核':(eolInfoData.approvalStatus==1?'审核通过':'审核不过')"
            label="审批结果："
            placeholder="点击选择审批结果"
            @click="scPicker = true"
        />
        <van-popup v-model="scPicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="scListData"
              :default-index="scListData.findIndex(item => item.approvalStatus==eolInfoData.approvalStatus)"
              @confirm="scConfirm"
              @cancel="scPicker = false"
          />
        </van-popup>
        <van-field label="拒绝刷写申请原因："
                   v-if="eolInfoData.approvalStatus==-1"
                   v-model="eolInfoData.refuseReason"
                   name="approvalRewriteTimes"
                   required
                   type="textarea"
                   row="2"
                   placeholder="请输入刷写次数"
                   class="phoneInput"/>
        <!--刷写包-->
        <van-field
            readonly
            clickable
            name="picker"
            required
            :value="eolInfoData.fileName"
            label="刷写包"
            placeholder="点击选择刷写包"
            @click="shuXiePicker = true"
        />
        <van-popup v-model="shuXiePicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="eolfileListData"
              :default-index="eolfileListData.findIndex(item => item.fileName==eolInfoData.fileName)"
              value-key="fileName"
              @confirm="shuXieConfirm"
              @cancel="shuXiePicker = false"
          />
        </van-popup>

        <van-field label="刷写包版本："
                   :value="eolInfoData.license&&eolInfoData.license.eolFile.eolVersion" readonly/>
        <van-field label="刷写次数："
                   v-model="eolInfoData.approvalRewriteTimes"
                   name="approvalRewriteTimes"
                   required
                   placeholder="请输入刷写次数"
                   class="phoneInput"/>
        <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="eolInfoData.applyValidDate"
            label="申请刷写有效期："
            placeholder="点击选择时间"
            @click="timePicker = true"
        />
        <van-popup v-model="timePicker" position="bottom">
          <van-datetime-picker
              :value="eolInfoData.applyValidDate"
              :min-date="minDate"
              type="date"
              @confirm="timeConfirm"
              @cancel="timePicker = false"
          />
        </van-popup>
      </van-form>
    </div>
    <div class="columnCC mt-2">
      <van-button type="info" class="widthPC-60" size="small" @click="eolorderUpdateReq"> 提 交</van-button>
    </div>
    <div>
      参数查看
    </div>
    <!--<div>-->
      <!--{{windowData}}-->
    <!--</div>-->
    <!--<div>-->
      <!--{{appData}}-->
    <!--</div>-->
  </div>
</template>

<script>
  // import { mapState, mapMutations, mapActions } from 'vuex'
  import TableComponent from './component/TableComp'
  export default {
    name: 'DiagnosticReport',
    components: {
      TableComponent,
    },
    // mixins: [validMixins],
    props: {
      // treeData: Array,
    },
    // mixins: [validMixins],
    data() {
      return {
        value: "",
        columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
        showPicker: false,
        currentDate: new Date(),
        jsPhone: [],

        timeValue: '',
        shuXieId:null,
        minDate:"",
        //select选择
        shuXiePicker: false,
        scPicker: false,
        timePicker: false,
        /*请求数据*/
        eolInfoData: {
          "id": 1,//申请单ID
          "ctime": "2019-11-07 14:12:47",//申请时间
          "engineNo": "112545",//发动机号
          "vehicleImg": "https://img.yzcdn.cn/vant/cat.jpeg",//整车铭牌图片路径
          "engineImg": "https://img.yzcdn.cn/vant/cat.jpeg",//发动机铭牌图片路径
          "model": "4K22V",//机型
          "modelVar": "4K22V-38",//机型变型
          "orderNumber": "2020-08-12",//工单号
          "applicantUserName": "ygf",//申请人用户名
          "applicantRealName": "王",//申请人姓名
          "approverUserName": "wxy",//审批人用户名
          "approvalStatus": 0,//审核状态，0：待审核，1：审核通过，-1：审核不过
          "applyRewriteTimes": 10,//申请刷写次数
          "applyValidDate": "2020-08-12",//申请刷写有效期
          "approvalRewriteTimes": 2,//审批刷写次数
          "approvalValidDate": "2020-08-12",//审批刷写有效期
          "approvalDate": "2020-08-12",//审批时间
          "remark": "https://img.yzcdn.cn/vant/cat.jpeg",//备注，申请原因
          "refuseReason": "",//拒绝审批原因
          "license": {
            "eolFile":{
               "eolVersion":2,
            },
            "downloaded": "false",//下载状态，false：未下载, true：已下载
          },
          "fileName": "",//刷写包文件名
          "downloadable": "true",//下载按钮是否可见，true:可见，false:不可见
        },
        //家获取匹配刷写包列表接口
        scListData: [
          {
            text:"审核通过",
            approvalStatus:1
          },
          {
            text:"审核不过",
            approvalStatus:-1
          }
        ],
        eolfileListData: [
          {
            "id": 7,//刷写包ID
            "version": "最新版本",//刷写包版本
            "remark": "",//备注
            "sysFileName": "/2019/07/663e531e-6c5a-4c94-9ff4-8557e294040e.zip",//文件路径
            "fileName": "test(4).zip",//文件名
            "fileSize": 1024,//文件大小
            "breakNumber": "L750606065B",//断点机号
            "model": "L750606065B",//机型
            "modelVar": "L750606065B",//机型变型
          },
          {
            "id": 7,//刷写包ID
            "version": "最新版本",//刷写包版本
            "remark": "",//备注
            "sysFileName": "/2019/07/663e531e-6c5a-4c94-9ff4-8557e294040e.zip",//文件路径
            "fileName": "柳机国六FC34.zip",//文件名
            "fileSize": 1024,//文件大小
            "breakNumber": "L750606065B",//断点机号
            "model": "L750606065B",//机型
            "modelVar": "L750606065B",//机型变型
          }
        ],
      }
    },
    computed: {
      // ...mapState('user', ['token', 'userInfo'])
    },
    watch: {
      // 'cmAddForm.enginePlatform': function(val) {
      //   console.log('enginePlatformval', val)
      //   if (val) {
      //     this.emissionOptionReq()
      //   }
      // }
    },
    created() {

    },
    mounted() {
      console.log("查看windows对象信息");
      //window.client.getSDKParam()

      alert(window.client.getSDKParam())
      /*
      * app需要传递的数据
      * this.taskReport, //申请单id
      * */
      //this.eolInfoReq();
      /*
      * app需要传递的数据
      * model	是	string	机型
        modelVar	是	string	机型变型
        engineNo	是	string	发动机号
      * */
      //this.taskReportAddReq();
    },
    methods: {
      // ...mapActions('user', ['closeSideBar']),
      // ...mapMutations('user', ['CHAGE_TOKEN']),
      /*picker*/
      shuXieConfirm(value) {
        console.log("value", value);
        this.shuXiePicker = false;
        //保存选择的刷写包id
        this.shuXieId=value.id
        this.eolInfoData.fileName=value.fileName
      },
      scConfirm(value) {
        console.log("value", value);
        this.scPicker = false;
        this.eolInfoData.approvalStatus=value.approvalStatus
      },
      timeConfirm(value) {
        console.log("value",value);
        //格式化时间
        this.eolInfoData.applyValidDate = this.$momentMini(value).format("YYYY-MM-DD")
        this.timePicker = false;
      },

      mobilePhoneValid(str) {
        console.log("str", str);
        const reg = /^0?1[0-9]{10}$/
        return reg.test(str)
      },

      /*数据请求*/
      //取刷写申请单详情
      eolInfoReq() {
        let data = {
          id: this.taskReport, //申请单id
        }
        this.$khReqMethod({
          url: "/scala-api/eolorder/eolInfo", data,
          method: 'get', isLoading: true, isParams: true
        }).then(res => {
          if (res.code === 0) {
            this.eolInfoData = res.data
          }
        })
      },
      //专家获取匹配刷写包列表接口
      taskReportAddReq() {
        let data = {
          model: this.taskReport,
          modelVar: this.dtCodeFirst,
          engineNo: this.dtCodeEnd,
        }
        this.$khReqMethod({
          url: "/scala-api/eolfile/list", data,
          method: 'get', isLoading: true, isParams: true
        }).then(res => {
          if (res.code === 0) {
            this.eolfileListData = res.data
          }
        })
      },
      //专家提交审核结果
      eolorderUpdateReq() {
        if(!this.eolInfoData.approvalRewriteTimes){
          this.$toast("请先填写刷写次数");
          return;
        }

        let data = {
          "id":this.eolInfoData.id,//申请单id
          "eolFileId":this.shuXieId,//刷写包id
          "approvalUsername":this.eolInfoData.applicantUserName,//审核人账号
          "approvalStatus":this.eolInfoData.approvalStatus,//审核状态 1.通过 -1.拒绝
          "approvalRewriteTimes":this.eolInfoData.approvalRewriteTimes,//审核批准的刷写次数
          "approvalValidDate":this.eolInfoData.applyValidDate,//审核批准的有效期
          "refuseReason":this.eolInfoData.refuseReason,//拒绝刷写申请的原因
        }
        this.$khReqMethod({
          url: "/scala-api/eolorder/update", data,
          method: 'POST', isLoading: true
        }).then(res => {
          if (res.code === 0) {

          }
        })
      },
    }
  }
</script>

<style lang="scss">
  #DiagnosticReport {
    line-height: 1;

  }

  //工单信息
  .gdInfo {
    .btnItem {
      margin-top: 10px;
      width: 100%;
      h3 {
        font-size: 13px;
        color: #666;
      }
    }
  }

  //title统一样式
  .itemTitle {
    margin-top: 4px;
    padding-left: 18px;
    background-color: #eeeeee;
    height: 35px;
    width: 100%;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    line-height: 35px;
  }
</style>
<style lang="scss">
  #DiagnosticReport {
    .van-cell::after {
      border-bottom: none;

    }
    .van-cell {
      padding: 6px 18px;
    }
    .phoneInput {
      .van-field__control--right {
        border: 1px solid #ddd;
      }
    }
    /*折叠框*/
    .van-cell__right-icon {
      position: absolute;
      left: -5px;
      top: 6px;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
      border-width: 0 !important;
    }
  }

</style>

